<template>
  <div class="student-navbar">
    <el-page-header @back="goBack" :content="title">
    </el-page-header>
    <div class="navbar-actions">
      <el-button type="primary" @click="goHome" size="small" class="home-button">返回主页</el-button>
      <el-button type="danger" @click="logout" size="small">退出登录</el-button>
    </div>
  </div>
</template>

<script>
import axios from '@/utils/request'

export default {
  name: 'StudentNavbar',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    goHome() {
      this.$router.push('/student');
    },
    async logout() {
      try {
        // 调用后端退出登录接口
        await axios.post('/auth/logout');
      } catch (error) {
        console.error('退出登录请求失败:', error);
      } finally {
        // 清除本地存储的用户信息
        localStorage.removeItem('token');
        localStorage.removeItem('userInfo');
        
        // 跳转到登录页面
        this.$router.push('/login');
      }
    }
  }
}
</script>

<style scoped>
.student-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #f5f5f5;
  border-radius: 5px;
  margin-bottom: 20px;
}

.navbar-actions {
  display: flex;
  gap: 10px;
}

.home-button {
  margin-left: 10px;
}
</style>